<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { useVbenModal } from '@vben/common-ui';

import { Button, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getThemesNotInstalled, postThemes } from '#/api/admin/theme';
import Icon from '#/components/Icons';

interface RowType {
  theme: string;
  name: string;
  id: number;
  version: string;
  lang: string;
  author: string;
  description: string;
  status: number;
}
const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'theme', title: '标识' },
    { field: 'name', title: '名称' },
    { field: 'version', title: '版本' },
    { field: 'lang', title: '语言' },
    { field: 'author', title: '作者' },
    { field: 'description', title: '描述' },
    {
      slots: { default: 'action' },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 120,
    },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async () => {
        const { data } = await getThemesNotInstalled();
        return data;
      },
    },
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid] = useVbenVxeGrid({
  gridOptions,
});

const [Modal, modalApi] = useVbenModal();

const handleInstall = async (theme: string) => {
  await postThemes(theme);
  message.success('安装成功');
  modalApi.setData({ isUpdata: true });
  modalApi.close();
};
</script>
<template>
  <Modal :footer="false" class="w-3/5" title="未安装模板列表">
    <Grid table-title="模板列表">
      <template #action="{ row }">
        <Button type="primary" @click="handleInstall(row.theme)">
          <template #icon>
            <span class="anticon">
              <Icon icon="ri:install-line" />
            </span>
          </template>
          安装
        </Button>
      </template>
    </Grid>
  </Modal>
</template>
